<template>
  <div>
    <div class="table-data" v-show="tabShow">
      <div class="search-box">
        <el-input size="small" v-model="searchMap.keyword " placeholder="门店名称"></el-input>
        <el-select v-model="searchMap.cate_id" clearable placeholder="请选择商家类型">
          <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button size="small" @click="handleAdd()" type="primary"><i class="el-icon-plus"></i><span>添加门店</span></el-button>
      </div>
      <el-table 
      v-loading="loading"
      element-loading-text="正在加载"
      element-loading-spinner="el-icon-loading" :data="tableData" :header-cell-style="headClass" style="width:100%" :height="tHeight" class="table-box">
        <el-table-column label="序号" width="100" prop="id"></el-table-column>
        <el-table-column label="所属商家" width="200" prop="parent_name"></el-table-column>
        <el-table-column label="商家类型" width="120" prop="cate"></el-table-column>
        <el-table-column label="门店名称"  prop="name"></el-table-column>>
        <el-table-column label="总店" width="80" prop="link_name">
          <template slot-scope="scope">
            <p v-if="scope.row.is_child==0">是</p>
            <p v-else>否</p>
          </template>
        </el-table-column>
        <el-table-column label="门店地址" prop="address">
          <template slot-scope="scope">
            <p>{{scope.row.address}}</p>
          </template>
        </el-table-column>
        <!-- <el-table-column label="地址" prop="address"></el-table-column> -->
        <el-table-column label="创建时间" prop="create_time" width="180"></el-table-column>
        <el-table-column label="操作" width="190">
          <template slot-scope="scope">
            <button @click="showQrCode(scope.row)" class="butt-min">收银台二维码</button>
            -
            <router-link :to="{name:'writeOffList',query:{id:scope.row.id}}" @click.native="handleEdit(scope.$index,scope.row)" class="link">核销员管理</router-link>
            -
            <router-link v-if="scope.row.is_child" :to="{name:'storeEdit',query:{id:scope.row.id}}" @click.native="handleEdit(scope.$index,scope.row)" class="link">编辑</router-link>
            <router-link v-if="scope.row.is_child == 0" :to="{name:'businessEdit',query:{id:scope.row.id}}" @click.native="handleEdit(scope.$index,scope.row)" class="link">编辑</router-link>
            -
            <button @click="handleRemove(scope.row)" class="butt-min danger">删除</button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages" ref="page-box">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,30,50]"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
      </div>
    </div>
    <el-dialog
      title="收银台二维码"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <div class="demo-image__placeholder">
        <div class="block">
          <el-image :src="qr_code_url">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
</el-dialog>
    <router-view @loadData="loadData" :tabShow="tabShow"></router-view>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
import businessApi from "@/api/business";
// import { State, Getter, Mutation, Action } from "vuex-class";
@Component({
  components: { }
})
export default class storeList extends Vue {
  // @Getter("user") getUser: any;
  @Provide() state: string = "1"; // 状态默认值
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() tableData: any = []; // 表格数据
  @Provide() typeList: any = []; // 商家类型列表
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() tabShow: Boolean = true; // 是显示否列表页面
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Provide() dialogVisible:Boolean = false;
  @Provide() qr_code_url: string='';
  @Prop({}) tabVisible!: any;
  @Provide() searchMap:{
    keyword: string,
    cate_id: string,
    is_child: any,
  }={
    keyword: "",
    cate_id: "",
    is_child: ''
  }
  @Watch("$route") handleRouteChange(to: any,form:any) {
    if(form.path!='/storeList'){
      this.tabShow=this.tabVisible;
    }
  }
  @Provide() searchDatas:{// 查询渠道参数
    market:string,
    channelNo: string,

  }={
    market:"",
    channelNo: "",
  }
  // 新增
  handleAdd(){
    this.tabShow=false
    this.$router.push({
      path:'/storeList/add'
    })
  }
  headClass() {
    return "text-align: center;background:#eef1f6;";
  }
  // 编辑
  handleEdit(index: number, row: any){
    this.tabShow=false
  }
  // 删除
  handleRemove(data) {
    this.$confirm('此操作将永久删除----'+data.parent_name+'----门店,是否继续？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      closeOnClickModal:false
    }).then(() => {
      businessApi.removeBusiness({id:data.id})
      .then((res: any) => {
        if(res.data.status){
          this.$message({
            message: '操作成功',
            type: "success"
          });
          this.loadData();
        }
      });
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消删除'
      });          
    });
    
  }
  created() {
    this.loadData();
    if(this.$route.path!='/storeList'){
      this.tabShow=false
    }
    businessApi.businessTypeList(1,9999)
      .then((res: any) => {
        this.typeList = res.data.data.list;
      });
  }

  loadData() {
    businessApi.businessList(this.page,this.size,this.searchMap)
      .then((res: any) => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
        this.loading=false
      });
  }

  showQrCode(row){
      businessApi.cashierCode(row.id).then((res: any) => {
        const resp = res.data;
        if(resp.code !== 200){
          this.$message.error(resp.msg);
          return false;
        }
        this.qr_code_url = resp.data.url
        this.dialogVisible = true;
      })
      
  }

  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }

  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }

  handleSearch(): void {
    // 点击搜索
  this.page = 1;
  this.loadData();
  }
}
</script>

<style lang="scss" scoped>
.el-date-editor{
  margin-right: 10px;
}
.el-button+.el-button {
  margin-top: 10px;
}
.el-table .cell {
  text-align: center;
}

</style>
